<template>
  <div class="home">
    <div class="header">
      <Header />
      <ly-tab
        v-model="selectedId"
        :items="topbar"
        :options="options"
        @change="lyTab"
      ></ly-tab>
    </div>
    <div class="content">
      <div class="container" v-for="(item, index) in newData" :key="index">
        <Swiper v-if="item.type === 'swiperList'" :swiperList="item.data" />
        <Icon v-if="item.type === 'iconsList'" :iconsList="item.data" />
        <Ad v-if="item.type === 'ads'" />
        <ad-list v-if="item.type === 'adList'" :adList="item.data" />
        <shop-list
          v-if="item.type === 'recommdList'"
          :recommdList="item.data"
        />
      </div>
    </div>
    <Tabbar />
  </div>
</template>

<script>
import Header from '@/components/home/Header'
import Swiper from '@/components/home/Swiper'
import Icon from '@/components/home/Icon'
import AdList from '@/components/home/AdList'
import ShopList from '@/components/common/ShopList'
import Ad from '@/components/common/Ad'
import http from '@/serveies/api/request'
import Tabbar from '@/components/common/Tabbar'

export default {
  name: 'Home',
  data () {
    return {
      selectedId: 0,
      items: [
        { label: '推荐' },
        { label: '手机' },
        { label: '智能' },
        { label: '电视' },
        { label: '家电' },
        { label: '笔记本' },
        { label: '设计' }
      ],
      topbar: [],
      options: {
        activeColor: 'red'
      },
      newData: []
    }
  },
  components: {
    Header,
    Swiper,
    Icon,
    AdList,
    ShopList,
    Ad,
    Tabbar
  },
  created () {
    this.httpInit()
  },
  methods: {
    async httpInit () {
      const res = await http.$axios({
        url: '/api/index_list/0/data/1'
      })
      this.topbar = Object.freeze(res.topBar)
      this.newData = Object.freeze(res.data)
    },
    lyTab (item, index) {
      this.addData(index)
    },
    addData (index) {
      http
        .$axios({
          url: '/api/index_list/' + index + '/data/1'
        })
        .then((res) => {
          if (res.constructor !== Array) {
            this.newData = res.data
          } else {
            this.newData = res
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .header {
    width: 100%;
    height: 2.4rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: #eee;
    ::v-deep .ly-tabbar {
      background-color: #eee !important;
    }
    .ly-tab-list {
      ::v-deep .ly-tab-active-bar {
        bottom: 0px !important;
      }
    }
  }
  background-color: #eee;
  .content {
    width: 100%;
    padding-top: 2.453333rem;
    padding-bottom: 1.333333rem;
  }
}
</style>
